<template>
    <div class="container">
            <el-row style="margin-top:20px;">
                <el-col :span="7">
                    <el-input placeholder="请输入关键词" v-model.trim="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                       
                        <el-button slot="append" @click="handleSearch">搜索</el-button>
                    </el-input>
                </el-col>
                <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                    <el-upload
                        class="upload-daoru"
                        ref="upload"
                        :action="action"
                        :on-change="uploadonchange"
                        accept=".xlsx,.xls"
                        :show-file-list='false'
                        :auto-upload="false">
                        <el-button slot="trigger" size="small">导入模板</el-button>
                    </el-upload>
                <!-- <router-link to="/customerManagement/added"> -->
                <el-button type="primary" v-if="added" style="float:right; margin-right: 10px" @click="goadd">新增</el-button>
                <!-- </router-link> -->
            </el-row>
                
            <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
                <!-- <el-table-column prop="area" sortable label="所在地区"></el-table-column> -->
                <el-table-column prop="userName" sortable label="联系人"></el-table-column>
                <el-table-column prop="phone" sortable label="联系方式"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            v-if="edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        
                        <el-button
                            type="text"
                            v-if="del"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
    
    </div>
</template>

<script>
    import {client_daoru,client_findByList,client_findById,client_delete} from "@/request/api"
    import {CodeToText} from 'element-china-area-data'
    export default {
        props: ['activeName'],
        data() {
            return {
                total:0,
                currentPage:1,
                pagesize:10,
                searchName: '',
                tableData: [],
                form: {},
                idx: -1,
                id: -1,
                boxCode:'',
                boxCode1:'',
                del:true,
                added:true,
                edit:true,
                action:'',
            };
        },
        created(){
             var data = JSON.stringify(this.$store.state.kh)
            var a = "新增"
            var b = "编辑"
            var d = "删除"
            // if(data.indexOf(a) != -1){
            //     this.added = true
            // }else{
            //     this.added = false
            // }
            // if(data.indexOf(b) != -1){
            //     this.edit = true
            // }else{
            //     this.edit = false
            // }
            // if(data.indexOf(d) != -1){
            //     this.del = true
            // }else{
            //     this.del = false
            // }
        },
        mounted(){
            this.init()
        },
        methods: {
            download(){
                 window.location.href = "http://" + window.location.host + "/客户模版导入.xlsx";
                // window.location.href = "http://47.104.241.124:8901/user/outUser";
            },
            uploadonchange(file) {
                let formData = new FormData();
                formData.append('file', file.raw);
                 formData.append("companyId",this.activeName)
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                client_daoru(formData).then((res) =>{
                    if (res.code == 200) {
                        this.$notify({
                            title: '操作成功',
                            message: '导入成功',
                            type: 'success'
                        });
                        this.init()
                    } else{
                        this.$notify.error({
                            title: '操作失败',
                            message: '导入失败',
                            type: 'error'
                        });
                    }
                })
            },
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            init(){

               client_findByList({
                   page:this.currentPage,
                   query:this.searchName,
                    companyId:this.activeName
                }).then((res)=>{
                  this.tableData = res.rows;
                  this.total = res.total
                //   var arr = ""
                //   for (let i = 0; i < this.tableData.length; i++) {
                //     var list = this.tableData[i].area.split(",")
                //     var arr = ""
                //     for (let k = 0; k < list.length; k++) {
                //         arr += CodeToText[list[k]] + "/"   
                //     }  
                //       this.tableData[i].area = arr.substr(0,arr.length-1)
                //   }
                })
            },
            //搜索
            handleSearch(){
                this.currentPage = 1
                this.init()
            },
            //跳转编辑页面
            handleEdit(index,row){
                this.$router.push({
                    path: '/managecustomerManagement/added',
                    query: { id: row.id,sid:this.activeName }
                });
            },
            goadd(){
                this.$router.push({
                    path: '/managecustomerManagement/added',
                    query: { sid:this.activeName }
                });
            },
      
            //删除
            handleDelete(index,row){
                
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    client_delete(row.id).then(res=>{
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success',
                            
                        });
                        // this.tableData.splice(row,1)
                        this.init()
                    })
                });
            },
           
        },
        watch:{
            activeName:{
                handler(newVal, oldVal) {
                    this.activeName = newVal
                    this.init()
                },
                deep: true
            }
        }
        
    }
</script>

<style scoped lang="less">
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-table{ margin-top: 20px;}
 .el-pagination{
    text-align: center;
}
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>